import React, { Component } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import InlineEditor from '@ckeditor/ckeditor5-build-inline';


class App extends Component {
    state = {
      editor: null
    }

    render() {
        return (
            <div className="App">
                <h2>Using CKEditor 5 build in React</h2>
                <CKEditor
                    editor={ InlineEditor }
                    data="<p>Hello from CKEditor 5!</p>"
                    onInit={ editor => {
                        // You can store the "editor" and use when it is needed.
                        console.log( 'Editor is ready to use!', editor );
                        this.setState({editor})

                    } }
                    onChange={ ( event, editor ) => {
                        const data = editor.getData();
                        console.log( { event, editor, data } );
                    } }
                    onBlur={ editor => {
                        console.log( 'Blur.', editor );
                        const { editor: editor2 } = this.state
                        const data = editor2.getData();
                        console.log( { editor, editor2, data } );


                    } }
                    onFocus={ editor => {
                        console.log( 'Focus.', editor  );
                    } }
                />
            </div>
        );
    }
}

export default App;
